<template>
  <a-layout>
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible    :collapsedWidth="30">
      <home-aside></home-aside>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{background: '#fff', padding: 0,margin:'0px',height:'45px'}">
        <home-header :collapsed="collapsed" @changeStatus="changeStatus"></home-header>
      </a-layout-header>
      <a-layout-content  :style="{ margin: '0px', padding: '0px', background: '#fff', minHeight: '280px' }"
      >
      <home-main></home-main>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script setup lang="ts">
import HomeHeader from './components/HomeHeader.vue';
import HomeAside from './components/HomeAside.vue';
import HomeMain from './components/HomeMain.vue';
import {  ref } from 'vue';
//左侧组件是否收缩的变量
const collapsed = ref<boolean>(false);
//又header上的按钮触发
const changeStatus=()=>{
  collapsed.value=!collapsed.value;
}
</script>
<style>
</style>